<template>
  <div class="detail-page">
    <div class="side-bar">
      <semester-side-bar></semester-side-bar>
    </div>
    <div class="detail-view">
      <router-view />
    </div>
  </div>
</template>

<script>
import SemesterSideBar from './components/SemesterSideBar.vue';

export default {
  name: 'DetailPage',
  components: { SemesterSideBar },
  created() {
    //   console.log('created');
    //   console.log(this.$router.options.routes);
    //   console.log(this.$route.path);
    //   console.log(this.$route.matched);
    //   let routes = {
    //     children: this.$router.options.routes,
    //   };
    //   const route = this.$route.matched;
    //   console.log('children', routes.children);
    //   const a = [];
    //   for (let i = 0; i < route.length - 1; i += 1) {
    //     a.push(routes.children.find(e => e.path === route[i].path));
    //   }
    //   routes = a;
    //   console.log('routes.childre=', routes);
  },
};
</script>

<style   lang="scss" scoped>
.detail-page {
  width: 1200px;
  height: auto;
  margin: 0 auto;
  display: flex;
  padding-top: 38px;
  justify-content: space-between;
  .side-bar {
    width: 200px;
    height: auto;
  }
  .detail-view {
    width: 980px;
    height: auto;
  }
}
</style>
